<template>
  <el-main>
    <div class="con1_box">
      <el-row>
        <el-col v-for="(item,index) in dept" :key="index" :span="4" style="text-align: center;" @click.native="selected(item)">{{ item.label }}</el-col>
      </el-row>

    </div>
  </el-main>
</template>
<script>
//  引入左侧菜单组件
import { getStaffList } from '@/api/newUsertest'
export default {
  components: {},
  data() {
    return {
      loading: false,

      dept: [{
        id: '0',
        label: '事假'
      },
      {
        id: '1',
        label: '公休假'
      },
      {
        id: '2',
        label: '病假'
      },
      {
        id: '3',
        label: '婚假'
      },
      {
        id: '4',
        label: '产假'
      },
      {
        id: '5',
        label: '计划生育假'
      },
      {
        id: '6',
        label: '工伤'
      },
      {
        id: '8',
        label: '丧假'
      },
      {
        id: '9',
        label: '探亲假'
      },
      {
        id: '10',
        label: '进修'
      },
      {
        id: '11',
        label: '学习'
      },
      {
        id: '12',
        label: '下乡'
      }
      ]
    }
  },
  computed: {

  },

  mounted() { // 挂载后
    // this.fetchData()
  },

  methods: {
    selected(row) {
      this.$router.push({ path: '/kaoq/edit', query: { id: row.id, name: row.label }})
    }

  }
}
</script>

<style scoped lang="scss">
::v-deep .el-col{
    text-align: center;
    padding: 40px 0;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(228, 228, 228, 1);
    border-radius: 6px;
    margin: 10px;
    font-size: 18px;
}
::v-deep .el-col:hover{
  background-color: rgba(138, 193, 255, 1);
  color: white;
}
</style>
